<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=5.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		
		<link type="text/css" rel="stylesheet" href="../css/model/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="../css/model/swiper.css" />
		<link type="text/css" rel="stylesheet" href="../css/top_main.css" />
		<link type="text/css" rel="stylesheet" href="../css/footer.css" />
		<link type="text/css" rel="stylesheet" href="../css/buycar.css" />
		<link type="text/css" rel="stylesheet" href="../css/layui.css" />
		
		<script type="text/javascript" src="../js/model/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="../js/model/bootstrap.js"></script>
		<script type="text/javascript" src="../js/model/swiper.js"></script>
		<script type="text/javascript" src="../js/model/reset_font.js"></script>
		<script type="text/javascript" src="../js/layui.all.js"></script>
		
		<script type="text/javascript" src="../js/buycar.js"></script>
		<script type="text/javascript" src="../js/footer.js"></script>
		
		<title>优当借书网</title>
		
	</head>
	<body>
		<!--0是非会员  1是会员-->
		<input type="hidden" class="huiyuan" id="huiyuan" value="0"  />		
		<div class="top">
			<a href="#"></a>
			<span>借购车</span>
		</div>
		<div class="main">
			<div class="navs">
				<a href="#" class="nav1 Btnbutton active">
					<span>借阅车</span>
				</a>
				<a href="#" class="nav2 Btnbutton">
					<span>购物车</span>
				</a>
			</div>
			<div class="mySwiper">
				<div class="swiper-container" id="swiper-container1">
					<div class="swiper-wrapper">
						<div class="swiper-slide slide1" >
							<!--一条信息 开始-->
							<div class="item item0 " id="11">
								<a href="#" class="item_a">
									<div class="i_left"></div>
									<div class="i_center">
										<img src="../images/books/book.png"  />
										<div class="i_c_con">
											<div class="goodsname">奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕</div>
											<div class="ages">2~5岁</div>
											<div class="isbn">
												ISBN<span>222222255239</span>
											</div>
										</div>
									</div>
									
									<!--状态值  0为已下架  1为已借出 2 为借-->
									<input type="hidden" name="b_status" class="b_status" value="2" />
									<div class="status"></div>
								</a>
								
								<div class="editboard">
									<div class="delete">
										<img src="../images/buycar/del.png" class="det_pic"  />
										<span>删除</span>
									</div>
									<div class="change_num">
										<input type="hidden" class="max" value="5"  />
										<div class="dic dic1"></div>
										<div class="num">1</div>
										<div class="add add1"></div>
									</div>
								</div>
							</div>
							<!--一条信息 结束-->
							
							<!--一条信息 开始-->
							<div class="item item0 " id="12">
								<a href="#" class="">
									<div class="i_left"></div>
									<div class="i_center">
										<img src="../images/books/book.png"  />
										<div class="i_c_con">
											<div class="goodsname">奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕</div>
											<div class="ages">2~5岁</div>
											<div class="isbn">
												ISBN<span>222222255239</span>
											</div>
										</div>
									</div>
									<!--状态值  0为已下架  1为已借出 2 为可借-->
									<input type="hidden" name="b_status" class="b_status" value="1" />
									<div class="status "></div>
								</a>
								<div class="editboard">
									<div class="delete">
										<img src="../images/buycar/del.png" class="det_pic"  />
										<span>删除</span>
									</div>
									<div class="change_num">
										<input type="hidden" class="max" value="5"  />
										<div class="dic dic1"></div>
										<div class="num">1</div>
										<div class="add add1"></div>
									</div>
								</div>
							</div>
							<!--一条信息 结束-->
							
							<!--一条信息 开始-->
							<div class="item item0" id="13">
								<a href="#" class="">
									<div class="i_left"></div>
									<div class="i_center">
										<img src="../images/books/book.png"  />
										<div class="i_c_con">
											<div class="goodsname">奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕</div>
											<div class="ages">2~5岁</div>
											<div class="isbn">
												ISBN<span>222222255239</span>
											</div>
										</div>
									</div>
									<!--状态值  0为已下架  1为已借出 2 为借-->
									<input type="hidden" name="b_status" class="b_status" value="2" />
									<div class="status"></div>
								</a>
								<div class="editboard">
									<div class="delete">
										<img src="../images/buycar/del.png" class="det_pic"  />
										<span>删除</span>
									</div>
									<div class="change_num">
										<input type="hidden" class="max" value="7"  />
										<div class="dic dic1"></div>
										<div class="num">1</div>
										<div class="add add1"></div>
									</div>
								</div>
							</div>
							<!--一条信息 结束-->
							
							<!--一条信息 开始-->
							<div class="item item0" id="14">
								<a href="#" class="">
									<div class="i_left"></div>
									<div class="i_center">
										<img src="../images/books/book.png"  />
										<div class="i_c_con">
											<div class="goodsname">奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕</div>
											<div class="ages">2~5岁</div>
											<div class="isbn">
												ISBN<span>222222255239</span>
											</div>
										</div>
									</div>
									<!--状态值  0为已下架  1为已借出 2 为借-->
									<input type="hidden" name="b_status" class="b_status" value="0" />
									<div class="status "></div>
								</a>
								<div class="editboard">
									<div class="delete">
										<img src="../images/buycar/del.png" class="det_pic"  />
										<span>删除</span>
									</div>
									<div class="change_num">
										<input type="hidden" class="max" value="5"  />
										<div class="dic dic1"></div>
										<div class="num">1</div>
										<div class="add add0"></div>
									</div>
								</div>
							</div>
							<!--一条信息 结束-->
							
							
						</div>
						<div class="swiper-slide slide2"  >
							<!--一条信息 开始-->
							<div class="item item1 " id="21">
								<a href="#" class="">
									<div class="i_left"></div>
									<div class="i_center">
										<img src="../images/books/book.png"  />
										<div class="i_c_con">
											<div class="goodsname">奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕</div>
											<div class="goodstype">6寸;奶油蛋糕;蓝色;蜡烛1;贺卡2;贺卡3;</div>
											<div class="goodsprice">
												￥<span class="price">239</span>
											</div>
										</div>
									</div>
									<div class="i_right">
										<img src="../images/buycar/del.png" class="del" />
										<div class="num">
											<span>x</span><span class="goodsnum">11</span>
										</div>
									</div>
								</a>
							</div>
							<!--一条信息 结束-->
							
							<!--一条信息 开始-->
							<div class="item item1" id="22">
								<a href="#" class="">
									<div class="i_left"></div>
									<div class="i_center">
										<img src="../images/books/book.png"  />
										<div class="i_c_con">
											<div class="goodsname">奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕奶油草莓蛋糕</div>
											<div class="goodstype">6寸;奶油蛋糕;蓝色;蜡烛1;贺卡2;贺卡3;</div>
											<div class="goodsprice">
												￥<span class="price">239</span>
											</div>
										</div>
									</div>
									<div class="i_right">
										<img src="../images/buycar/del.png" class="del" />
										<div class="num">
											<span>x</span><span class="goodsnum">11</span>
										</div>
									</div>
								</a>
							</div>
							<!--一条信息 结束-->
							
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<!--底部合计 开始-->
		<div class="botbar type1">
			<div class="bot_type1">
				<div class="checkall">
					<div class="checkall_pic"></div>
					<div class="checkall_text">全选（<span class="amount">0</span>）</div>
				</div>
				<div class="bot_right">
					<button class="zxs">再选书</button>
					<button class="qxd">去下单</button>
				</div>
			</div>
			<div class="bot_type2">
				<div class="checkall">
					<div class="checkall_pic"></div>
					<div class="checkall_text">全选</div>
				</div>
				<div class="bot_right">
					<div class="heji">
						合计<span class="font-red">￥<span class="total">0</span></span>
					</div>
					<div class="count">
						<button class="jiesuan">
							结算（<pan class="amount">0</pan>）
						</button>
					</div>
				</div>
			</div>
		</div>
		<!--底部合计 结束-->
		<div class="isnone" style="display: none;">
			<img src="../images/buycar/isnone.png" class="isnone_pic" />
			<div>您的购物车空空如也~</div>
		</div>
		<div class="footer">
			<ul>
				<li>
					<a href="#" class="home ">
						<div class="img"></div>
						<span>首页</span>
					</a>
				</li>
				<li>
					<a href="#" class="news">
						<div class="img"></div>
						<span>动态</span>
					</a>
				</li>
				<li>
					<a href="#"  class="buycars active">
						<div class="img"></div>
						<span>借购车</span>
					</a>
				</li>
				<li>
					<a href="#" class="myorders">
						<div class="img"></div>
						<span>订单</span>
					</a>
				</li>
				<li>
					<a href="#" class="me">
						<div class="img"></div>
						<span>我</span>
					</a>
				</li>
			</ul>
		</div>
		<!--弹出菜单 开始-->
		<!--购物车确认删除提示 开始-->
		<div class="grey grey1" style="display: none;">
			<div class="whiteboard">
				<div class="wb_top">
					确认删除此商品？
				</div>
				<div class="wb_bot">
					<button class="cancel">取消</button>
					<button class="comfirm">确认</button>
				</div>
			</div>
		</div>
		<!--购物车确认删除提示 结束-->
		<!--借阅车确认删除提示 开始-->
		<div class="grey grey2" style="display: none;">
			<div class="whiteboard">
				<div class="wb_top">
					确认删除此书籍？
				</div>
				<div class="wb_bot">
					<button class="cancel">取消</button>
					<button class="comfirm">确认</button>
				</div>
			</div>
		</div>
		<!--借阅车确认删除提示 结束-->
		
		<!--开通会员提示 开始-->
		<div class="grey grey3" style="display: none;">
			<div class="whiteboard">
				<div class="wb_top">
					提示
				</div>
				<div class="wb_con">
					恭喜您马上就要成为优当借书网<span class="font-red">175</span>位VIP会员啦， 开通会员即可马上借阅！
				</div>
				<div class="wb_bot">
					<button class="cancel">再想一想</button>
					<button class="comfirm">立即开通</button>
				</div>
			</div>
		</div>
		<!--开通会员提示 结束-->
		
		<!--书已借出或下架提示 开始-->
		<div class="grey grey4" style="display: none;">
			<div class="whiteboard">
				<div class="wb_con">
					客官你来晚了，这本书已被借出或下架，您可以选择其他书籍进行借阅！
				</div>
				<div class="wb_bot">
					<a href="#" class="iknow">我知道了</a>
				</div>
			</div>
		</div>
		<!--书已借出或下架提示 结束-->
		
		<!--书已借出或下架提示 开始-->
		<div class="grey grey5" style="display: none;">
			<div class="whiteboard">
				<div class="wb_con">
					亲，你所借阅的书籍不得少于三本或不得多于三本！
				</div>
				<div class="wb_bot">
					<a href="#" class="iknow">我知道了</a>
				</div>
			</div>
		</div>
		<!--书已借出或下架提示 结束-->
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<script>
			
				
			$(function(){
				//页面初始化
				init();
				//3.点击删除
				var del_id;
				$(".delete").on("touchstart",function(){
					del_id=$(this).parent().parent().attr("id");
					$(".grey2").show();
				})
				//取消删除
				$(".cancel").click(function(){
					layer.msg("操作已取消");
					$(".grey").hide();
				})
				//确认删除
				$(".grey2 .comfirm").click(function(){
					var goodid=del_id;
					console.log(goodid);
					$("#"+goodid).remove();
					$(".grey2").hide();
					change_type();
					check_amount();
					check_left();
				})
				
				$(".bot_type1 .checkall").click(function(){
					flag=$(this).hasClass("checked");
					var goods__num=$(".item0").length;
					var status2_num=0;
					var amount=0;
					if(!flag){
						$(this).addClass("checked");
						for(i=0;i<goods__num;i++){
							var status=$(".item0").eq(i).find(".b_status").val();
							if(status==2){
								$(".item0").eq(i).addClass("checked");
								
							}
						}
						check_amount();
					}else{
						$(this).removeClass("checked");
						for(i=0;i<goods__num;i++){
							$(".item0").eq(i).removeClass("checked");
						}
						$(".amount").text(0);
					}
					
				})
				
				$(".bot_type2 .checkall").click(function(){
					 var goods__num=$(".item1").length;console.log(goods__num);
					 var flag=$(this).hasClass("checked");console.log(flag);
					 if(!flag){
					 	$(this).addClass("checked");
					 	for(i=0;i<goods__num;i++){
							$(".item1").eq(i).addClass("checked");
						}
					 }else{
					 	$(this).removeClass("checked")
					 	for(i=0;i<goods__num;i++){
							$(".item1").eq(i).removeClass("checked");
						}
					 }
					check_amount2();
						
				})
				var del2_id;
				$(".del").click(function(){
					var thisid=$(this).parent().parent().parent().attr("id");
					del2_id=thisid
					$(".grey1").show();
					
				})
				$(".grey1 .comfirm").click(function(){
					$("#"+del2_id).remove();
					$(".grey1").hide();
					check_amount2();
					
					var item1_length=$(".item1").length;
					if(item1_length==0){
						$(".isnone").show();
						$(".slide2").html($(".isnone"));
						var hh=$(".isnone").css("height");
						$(".swiper-wrapper").css("height","auto");
					}
				})
				
				//去下单
				$(".qxd").click(function(){
					var goods__num=$(".item0").length;
					var num=0;
					var amount=0;
					var check_num=0;
					console.log(amount);
					for(i=0;i<goods__num;i++){
						var checks=$(".item0").eq(i).hasClass("checked");
						num=$(".item0").eq(i).find(".num").text()*1;
						if(checks){
							check_num+=1;
							amount=amount+num;
						}
						
					}
//					console.log(check_num);
//					console.log(amount);
					if(amount!=3){
						$(".grey5").show();
					}else{
						var huiyuan=$(".huiyuan").val();
						if(huiyuan==0){
							$(".grey3").show();
						}else{
							console.log("成功，去下单");
						}
						
					}
					
					
				})
				
				$(".grey3 .comfirm").click(function(){
					$(".grey3").hide();
					alert("进入开通页面");
				})
				$(".grey5 .iknow").click(function(){
					$(".grey5").hide();
				})
				
				$(".i_left").click(function(){
					var status=$(this).parent().find(".b_status").val();
					if(status==0||status==1){
						$(".grey4").show();
					}
				})
				
				$(".grey4 .iknow").click(function(){
					$(".grey4").hide();
				})
				
			})
			
			function init(){
				$(".grey").hide();
				
				change_type();
				
			}
			
			function add(rv){
					var max=rv.parent().find(".max").val()*1;
					var num_now=rv.prev().text()*1;
					var amount=$(".amount").text()*1;
					if(num_now<max){
						num_now=num_now+1;
						rv.prev().text(num_now);
//						if(rv.parent().parent().parent().hasClass("checked")){
//						amount=amount+1;
//						}
					} if(num_now==max){
						layer.msg("不能再多了");
						num_now=num_now;
//						if(rv.parent().parent().parent().hasClass("checked")){
//						amount=amount;
//						}
					}
					check_amount();
				}
			
			function dic(rv){
					var num_now=rv.next().text()*1;
					var amount=$(".amount").text()*1;
					if(num_now>1){
						num_now=num_now-1;
						rv.next().text(num_now);
//						if(rv.parent().parent().parent().hasClass("checked")){
//						amount=amount-1;
//						}
					}
					if(num_now==1){//减到1时 调用删除面板
						$(".grey2").show();
//						if(rv.parent().parent().parent().hasClass("checked")){
//							amount=amount;
//						}
					}
					check_amount();
				}
			
			function checks(rv){
				event.stopPropagation();
					var status=rv.parent().parent().hasClass("checked");
					if(status){
						rv.parent().parent().removeClass("checked");
					}else{
						rv.parent().parent().addClass("checked");
					}
					
					check_left();
				}
			function checks2(rv){
				event.stopPropagation();
					var status=rv.parent().parent().hasClass("checked");
					if(status){
						rv.parent().parent().removeClass("checked");
					}else{
						rv.parent().parent().addClass("checked");
					}
					
					check_left2();
				}
			function check_left(){
				var goods__num=$(".item0").length;
				var status2_num=0;
				var check_num=0;var amount=0;
				for(i=0;i<goods__num;i++){
				var status=$(".item0").eq(i).find(".b_status").val();
				var checks=$(".item0").eq(i).hasClass("checked");
					if(status==2){
						status2_num+=1;
					}
					if(checks){
						check_num+=1;
						
					}
				}
				check_amount();

				if(status2_num==check_num){
					if(status2_num==0){
						$(".checkall").removeClass("checked");
					}else{
						$(".checkall").addClass("checked");
					}
					
				}else{
					$(".checkall").removeClass("checked");
				}
			}
			
			function check_left2(){
				var goods_num=$(".item1").length;
				var check_num=0;
				var goodsnum=0;var price;
				var amount=0;var total=0;
				for(i=0;i<goods_num;i++){
					var checks=$(".item1").eq(i).hasClass("checked");
					
					if(checks){
					check_num+=1;
					
					}
				}
				check_amount2();
				if(goods_num==check_num){
					$(".checkall").addClass("checked");
				}else{
					$(".checkall").removeClass("checked");
				}
			}
			
			function check_amount(){
				var goods_num=$(".item0").length;
				var amount=0;var total=0;
				
				for(i=0;i<goods_num;i++){
					var checks=$(".item0").eq(i).hasClass("checked");
					
					if(checks){
						var num=$(".item0").eq(i).find(".num").text()*1;
						amount=amount+num;
						
					}
				}
				
				$(".bot_type1 .amount").text(amount);
			}
			
			function check_amount2(){
				var goods_num=$(".item1").length;
				var check_num=0;
				var goodsnum=0;var price;
				var amount=0;var total=0;
				var goods_num=$(".item1").length;
				if(goods_num>0){
					for(i=0;i<goods_num;i++){
					var checks=$(".item1").eq(i).hasClass("checked");
					goodsnum=$(".item1").eq(i).find(".goodsnum").text()*1;
					price=$(".price").text()*1;
						if(checks){
							amount=amount+goodsnum;
							total=total+goodsnum*price;
						}
					}
				}else if(goods_num==0){
					$(".checkall").removeClass("checked");
				}
				
				$(".bot_type2 .total").text(total);
				$(".bot_type2 .amount").text(amount);
			}
			
			function change_type(){
				var slide_length=$(".swiper-slide").length;
				for(var i=0;i<slide_length;i++){
					var slide_now=$(".swiper-slide").eq(i);
					var goods_length=slide_now.find(".item").length;
					if(goods_length==0){
						var thisid=i+1;
						isnone("slide"+thisid);
					}
					if(i==0){
						for(var j=0;j<goods_length;j++){
						var item_now=slide_now.find(".item").eq(j);
						var status_now=item_now.find(".b_status").val();
						    if(status_now==0){
						    	item_now.find(".status").addClass("yixiajia");
						    	item_now.find(".i_center").click(function(){
						    		$(this).closest(".item").find(".i_left").unbind("click");
						    		return false;
						    	});
						    	
						    }else if(status_now == 1){
						    	item_now.find(".status").addClass("yijiechu");
						    	item_now.find(".i_center").click(function(){
						    		$(this).closest(".item").find(".i_left").unbind("click");
						    		return false;
						    	});
						    }else if(status_now == 2){
						    	item_now.find(".add").on("click",function(){
						    		add($(this));
						    		
						    	})
						    	item_now.find(".add").on("touchstart",function(){
									$(this).addClass("add2").removeClass("add1");
								})
								item_now.find(".add").on("touchend",function(){
									$(this).addClass("add1").removeClass("add2");
								})
						    	item_now.find(".dic").on("click",function(){
						    		dic($(this));
						    	})
						    	
						    	item_now.find(".dic").on("touchstart",function(){
									$(this).addClass("dic0").removeClass("dic1");
								})
								item_now.find(".dic").on("touchend",function(){
									$(this).addClass("dic1").removeClass("dic0");
								})
						    	item_now.find(".i_left").click(function(){
						    		checks($(this));
						    	})
						    	item_now.find(".i_center").click(function(){
						    		location.href="book_detail.html";
						    	});
						    }
						}
					}
					if(i==1){
						var item1_length=$(".item1").length;
						for(var i=0;i<item1_length;i++){
							$(".item1").eq(i).find(".i_left").click(function(){
						    		checks2($(this));
						    	})	
						}
						
					}
					
					
				}
			}
			//显示空图片
			function isnone(rv){
				$(".isnone").show();
				$("."+rv).html($(".isnone"));
				var hh=$(".isnone").css("height");console.log(hh);
				$(".swiper-wrapper").css("height","auto");
			}
			
			
		</script>
		<script>
			var a = document.getElementsByTagName('a');
			for(var i = 0; i < a.length; i++)
			{
				a[i].addEventListener('touchstart',function(){},false);
			}
		</script>
	</body>
	
</html>
